<template>
  <div class="">
    <el-table :data="sushe" style="width: 100%">
      <el-table-column
        align="center"
        fixed
        prop="sushe_id"
        label="宿舍编号"
        width="150"
      />
      <el-table-column
        align="center"
        prop="type"
        label="宿舍类型"
        width="150"
      >
      <template #default="scope">
        {{ scope.row.type==0?"喵舍":scope.row.type==1?"汪舍":"其他" }}
      </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="floor"
        label="宿舍层数"
        width="150"
      >
        </el-table-column>
        <el-table-column
        align="center"
        prop="is_choose"
        label="是否被选"
        width="150"
      >
        <template #default="scope">
          {{scope.row.is_choose==='1'?'是':'否'}}
        </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" width="200">
        <template #header>
            <el-button type="danger" size="small" @click="isadd=true">添加宿舍</el-button>
        </template>
        <template #default="scope">
          <el-button
          type="primary"
            size="small"
            @click="handleClick(scope.row.sushe_id)"
          >
            重置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" title="重置提示" width="500">
    <span>请确认该宿舍是否已收拾好?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="reset"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-drawer  v-model="isadd" direction="rtl">
    <template #header>
      <h4>添加宿舍</h4>
    </template>
    <template #default>
      <div>
        <el-form :model="formData" ref="FromRef" label-width="auto">
          <el-form-item label="宿舍类型">
            <el-select
      v-model="formData.type"
      placeholder="请选择宿舍类型"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
          </el-form-item>
          <el-form-item label="宿舍层数">
            <el-select
      v-model="formData.floor"
      placeholder="请选择宿舍层数"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="isadd=false">取消</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {ref,reactive,onBeforeMount} from 'vue'
import {getsushe,resetsushe,addsushe} from '@/service/api/sushe'
import {ElMessage} from 'element-plus'
onBeforeMount(()=>{
    getSushe()
})
let dialogVisible=ref(false)
let isadd=ref(false)
let choosesushe=ref('')
let formData=ref({})
let sushe=ref([])
const options = [
  {
    value: '0',
    label: '喵舍',
  },
  {
    value: '1',
    label: '汪舍',
  },
  {
    value: '2',
    label: '其他',
  }
]
const options1 = [
  {
    value: '1',
    label: '1',
  },
  {
    value: '2',
    label: '2',
  },
  {
    value: '3',
    label: '3',
  }
]

function add(){
    addsushe({
        type:formData.value.type,
        floor:formData.value.floor
    }).then(res=>{
        if(res.data.code===200){
            ElMessage({
                message: "添加成功",
                type: "success",
            });
            getSushe()
        }
    })
}
function reset(){
    resetsushe({sushe_id:choosesushe.value}).then(res=>{
        if(res.data.code==200){
            dialogVisible.value=false
            getSushe()
        }
    })
}
function handleClick(e){
    choosesushe.value=e
    dialogVisible.value=true
}
function getSushe(){
  getsushe().then(res=>{
    if(res.data.code===200){
        sushe.value=res.data.data
    }
  })
}
</script>


<style lang="scss" scoped></style>
